<script setup lang="ts">
import { ref } from "vue";
import UserSearch from "@/views/main/system/user/c-cpns/user-search.vue";
import UserHeader from "@/views/main/system/user/c-cpns/user-header.vue";
import UserTable from "@/views/main/system/user/c-cpns/user-table.vue";
import UserPagination from "@/views/main/system/user/c-cpns/user-pagination.vue";
import useSystemStore from "@/stores/modules/main/system/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStore();

const pageSize = ref(10);
const currentPage = ref(1);

const handlePageSize = (val: number) => {
  pageSize.value = val;
  getUserListData();
};
const handlePageCurrent = (val: number) => {
  currentPage.value = val;
  getUserListData();
};

async function getUserListData(formData: any  ={}) {
  const size = pageSize.value;
  const offset = (currentPage.value - 1) * size;
  const queryInfo = { offset, size, ...formData };
  // 这里也需要异步请求 否则获取不到 store 中最新的 count
  await systemStore.postUsersListAction(queryInfo);
}

getUserListData();

const { usersList, usersTotalCount } = storeToRefs(systemStore);
</script>

<template>
  <div class="user-wrapper">
    <user-search @query-click="getUserListData" @reset-click="getUserListData" />
    <div class="content">
      <user-header></user-header>
      <user-table :usersList="usersList" @delete-click="getUserListData"></user-table>
      <user-pagination
        :usersList="usersList"
        :usersTotalCount="usersTotalCount"
        @pageSizeChange="handlePageSize"
        @pageCurrentChange="handlePageCurrent"
      ></user-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-wrapper {
  .content {
    margin-top: 20px;
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 20px;
  }
}
</style>
